<template>
	<view class="page" @click.stop="handleDec">
		<view class="header" :style="diap.style">
			<view class="title_box flex">
				<view class="left_icon flex">
					<u-icon color="#ffffff" name="arrow-left" size="40" @click="back"></u-icon>
				</view>
				<view class="title">产品名称</view>
				<view class="icon_r">
					<image class="msg" src="/static/icon/kefu.png" mode="scaleToFill" />
					<text class="little">投诉/反馈</text>
				</view>
			</view>
		</view>
		<view class="top_bg"></view>
		<view class="content">
			<view class="top">
				<view class="top_text">
					<view>
						借多少
						<text class="gray_text">(最高20000)</text>
					</view>
					<view>
						借多久
						<text class="gray_text">(最长36个月)</text>
					</view>
				</view>
				<view class="top_num">
					<view class="num_left">
						<input type="number" class="ipt_num" :focus="num" maxlength="6" v-model="money" @blur="limit" />
						<image src="/static/icon/xie.png" class="xie" @click="iptFocus" mode="scaleToFill" />
					</view>
					<view class="num_right" @click.stop="handleNum">
						<span class="month">{{ month }}</span>
						<image class="mon_img" src="/static/icon/sanjiao1.png" mode="scaleToFill" />
						<view class="option" v-if="isActive" ref="closeOpt">
							<view
								class="opt_item"
								v-for="item in option"
								:key="item.value"
								:class="active == item.value ? 'active' : ''"
								@click.stop="handleItem(item.value)"
							>
								{{ item.value }}
							</view>
						</view>
					</view>
				</view>
				<view class="top_line"></view>
				<view class="top_bom">
					<view class="tBom_text">
						<span>预估利息</span>
						<span>月均还款</span>
						<span>月利率</span>
					</view>
					<view class="tBom_num">
						<span>15600元</span>
						<span>17966元</span>
						<span>0.65%</span>
					</view>
				</view>
			</view>
			<u-gap height="24" bgColor="#F5F6FA"></u-gap>
			<!-- 产品简介 -->
			<view class="introduce">
				<view class="main_top">
					<view class="blue_line"></view>
					<text>产品简介</text>
				</view>
				<view class="long_line"></view>
				<view class="main_text">
					<view v-for="item in 3" :key="item">后台填写，关于产品的描述信息。</view>
				</view>
			</view>
			<u-gap height="24" bgColor="#F5F6FA"></u-gap>
			<!-- 申请条件 -->
			<view class="condition">
				<view class="main_top">
					<view class="blue_line"></view>
					<text>申请条件</text>
				</view>
				<view class="long_line"></view>
				<view class="main_text">
					<view>年龄要求：22-45岁，一段话</view>
				</view>
			</view>
			<u-gap height="24" bgColor="#F5F6FA"></u-gap>
			<!-- 机构信息 -->
			<view class="condition">
				<view class="main_top">
					<view class="blue_line"></view>
					<text>机构信息</text>
				</view>
				<view class="long_line"></view>
				<view class="main_text">
					<view>客服电话：400-036-080</view>
				</view>
			</view>
			<u-gap height="24" bgColor="#F5F6FA"></u-gap>
			<!-- 温馨提示 -->
			<view class="remind">
				<view class="main_top">
					<view class="blue_line"></view>
					<text>温馨提示</text>
				</view>
				<view class="long_line"></view>
				<view class="main_text">
					<view>产品下款前不收取费用，请警惕添加QQ、索要验证码等行为</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="btn headle" @click="next">马上领钱</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			pageScrollTop: 0, // 页面滚动距
			candidates: [1, 3, 6, 9, 12, 24, 36],
			money: 200000,
			month: 12,
			isActive: false,
			option: [{ value: '1' }, { value: '3' }, { value: '6' }, { value: '9' }, { value: '12' }, { value: '24' }, { value: '36' }],
			active: 12,
			// 控制输入框获取焦点
			num: false
		}
	},
	components: {},
	computed: {
		diap() {
			let val = this.pageScrollTop / 45
			return {
				style: `background-color: rgba(52,120,242,${val >= 1 ? 1 : val});`
			}
		}
	},
	onLoad() {
		// uni.removeStorageSync('token')
		// const token = uni.getStorageSync('token')
		// if (!token) {
		// 	uni.reLaunch({
		// 		url: '/pages/login/login'
		// 	})
		// }
	},
	// 页面滚动监听
	onPageScroll(e) {
		this.pageScrollTop = Math.floor(e.scrollTop)
	},
	methods: {
		//点击页面下拉框隐藏
		handleDec() {
			this.isActive = false
		},
		back() {
			uni.navigateBack()
		},
		next() {
			// uni.navigateTo({
			// 	url: '/pages/auth/demand'
			// })
		},
		handleNum() {
			this.isActive = !this.isActive
		},
		handleItem(month) {
			this.active = month
			this.month = month
			setTimeout(() => {
				this.isActive = false
			}, 80)
		},
		iptFocus() {
			this.num = true
		},
		limit() {
			if (this.money < 1000) {
				this.money = 1000
				return
			}
			if (this.money > 200000) {
				this.money = 200000
				return
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	background: #f5f6fa;
}
.content {
	padding: 0 32rpx;
	position: relative;
	top: -164rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #696969;
	.blue_line {
		width: 4rpx;
		height: 28rpx;
		background: #3478f2;
		border-radius: 2rpx;
		margin-right: 18rpx;
	}
	.long_line {
		width: 638rpx;
		height: 2rpx;
		background: #f3f3f3;
		margin-top: 16rpx;
	}
	.main_text {
		margin-top: 22rpx;
		line-height: 34rpx;
	}
	.main_top {
		display: flex;
		height: 44rpx;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	// 产品详情样式
	.top {
		width: 686rpx;
		height: 486rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx rgba(11, 137, 254, 0.08);
		border-radius: 16rpx;
		padding: 40rpx 24rpx 40rpx 24rpx;
		position: relative;
		.top_text {
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			.gray_text {
				font-size: 28rpx;
				font-weight: 400;
				color: #969799;
			}
		}
		.top_num {
			font-size: 60rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3478f2;
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			.num_right {
				// width: 168rpx;
				width: 342rpx;
				height: 88rpx;
				line-height: 88rpx;
				display: flex;
				align-items: center;
			}
			.num_left {
				display: flex;
				width: 344rpx;
				// 金额ipt框
				.ipt_num {
					font-size: 60rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3478f2;
					width: 250rpx;
					vertical-align: middle;
					text-align: center;
				}
			}
			.xie {
				width: 46rpx;
				height: 46rpx;
				margin-top: 20rpx;
			}
			.money {
				margin-right: 16rpx;
				line-height: 88rpx;
			}
			.month {
				display: inline-block;
				width: 80rpx;
				margin-right: 26rpx;
				vertical-align: middle;
				text-align: center;
			}
			.mon_img {
				width: 42rpx;
				height: 26rpx;
				vertical-align: middle;
			}
			.num_right {
				margin-right: 68rpx;
				line-height: 88rpx;
				position: relative;
				width: 168rpx;
				box-sizing: border-box;
				.option {
					width: 168rpx;
					height: 616rpx;
					box-shadow: 0px 0px 30rpx #cfe0ff;
					position: absolute;
					top: 100rpx;
					opacity: 1;
					background-color: #ffffff;
					z-index: 2;
					.opt_item {
						box-sizing: border-box;
						width: 168rpx;
						height: 88rpx;
						background: #ffffff;
						border-bottom: 2rpx solid #e4e4e4;
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
						opacity: 1;
						&:last-child {
							border: 0;
						}
					}
					.active {
						color: #3478f2;
					}
				}
			}
		}
		.top_line {
			position: absolute;
			width: 686rpx;
			height: 2rpx;
			background: #f3f3f3;
			top: 244rpx;
			left: 0;
		}
		.top_bom {
			width: 638rpx;
			height: 160rpx;
			background: #f0f6ff;
			border-radius: 16rpx;
			margin-top: 64rpx;
			padding: 24rpx;
			.tBom_text {
				display: flex;
				justify-content: space-evenly;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.tBom_num {
				display: flex;
				justify-content: space-evenly;
				margin-top: 34rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
	// 产品简介
	.introduce {
		width: 686rpx;
		height: 236rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
	}
	// 申请条件
	.condition {
		width: 686rpx;
		height: 156rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 18rpx 24rpx 20rpx 24rpx;
	}
	// 温馨提示
	.remind {
		width: 686rpx;
		height: 156rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 18rpx 22rpx 20rpx 22rpx;
	}
	// 按钮
	.btn {
		width: 688rpx;
		height: 92rpx;
		background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
		border-radius: 70rpx;
		margin: 0 auto;
		line-height: 92rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		margin-top: 120rpx;
	}
}
.flex {
	display: flex;
	align-items: center;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding-top: var(--status-bar-height);
	z-index: 10;
	background-color: #0481fe;
	color: rgba(255, 255, 255, 0.8);
	.title_box {
		height: 88rpx;
		padding: 0 32rpx;
		justify-content: space-between;
		position: relative;
		.title {
			width: 170rpx;
			height: 56rpx;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			position: absolute;
			left: 258rpx;
		}
		.icon_r {
			height: 44rpx;
			.msg {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}
			.little {
				width: 126rpx;
				height: 40rpx;
			}
		}
	}
}
.top_bg {
	height: 380rpx;
	background: linear-gradient(180deg, #0481fe 0%, #b6e9ff 100%);
}
</style>
